<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<link href="../css/table.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.3.min.js"></script>
<script>
var rows={'name':'姓名','age':'年龄','sex':'性别','cz':'操作'};
var data =[{'name':'张三','age':'18','sex':'男','cz':'修改,删除'},{'name':'张三','age':'18','sex':'男','cz':'修改,删除'}];
var pageSize = 10;
var pageCount = 20;
var pageIndex =5;

		$(function(){
			loadTable();	
		});
		
		function loadTable(){
				$('#ttitle').append('<td  width="55" ><input type="checkbox" name="checkbox" id="selAll" /><label for="checkbox">全选</label></td>');
				for(var key in rows){
					$('#ttitle').append('<td>'+rows[key]+'</td>');
				}
				
				for(var i=0;i<data.length;i++){
					var ttr ='<tr>';
					ttr+='<td><input type="checkbox" name="ids" id="sel" /></td>';
					for(var key in rows){
						ttr+='<td>'+data[i][key]+'</td>';
					}
					$('#tbody').append(ttr+'</tr>');
				}
				loadPageNumber();
		}
		
		function loadPageNumber(){
			var start =1;
			var end = pageCount;
			$('#pageIndex').html('');
			if(pageIndex>1){
				$('#pageIndex').append('<div class="page_">'+'<a href="?page='+(pageIndex-1)+'">上一页</a>'+'</div>');
			}
			if(pageCount>9 && pageIndex>9){
				var start = pageIndex-4;
			}
			if(pageCount>(pageIndex+4)){
				 end = pageIndex+4;
			}else{
				end =pageCount;	
			}
			
			for(var i=start;i<=end;i++){
				if(pageIndex==i){
					$('#pageIndex').append('<div class="page_sel" title="当前页">'+i+'</div>');
				}else{
					$('#pageIndex').append('<div class="page_" title="第'+i+'页">'+i+'</div>');
				}
			}
			
			if(pageIndex<pageCount){
				$('#pageIndex').append('<div class="page_">'+'<a href="?page='+(pageIndex+1)+'">下一页</a>'+'</div>');
			}
			
			$('#page_info').html('每页'+pageSize+'条 共'+pageCount+'页 当前第'+pageIndex+'页');
			
		}
		
		function selAll(){
			$('input [name="ids"]').attr('checked','checked');	
		}

</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead id="head">
  <tr id="ttitle">
  </tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="page_index">
  <div id="page_info">共[10]条记录 每页5条 共2页</div>
  <div id="pageIndex"> 
    <div class="page_">1</div>
  </div>
</div>
</body>
</html>
